import { onMounted, onUnmounted } from 'vue'

/**
 * 监听页面刷新
 * @param hasChanged 页面内容是否变化（是否需要弹出提示）
 * @param message 提示语
 * @param onUnload 确定时执行函数
 */
export const useBeforeunload = (hasChanged: () => boolean, message = '系统可能不会保存您所做的更改。', onUnload?: () => void) => {
  const handleUnload = (event: BeforeUnloadEvent) => {
    if (hasChanged()) {
      onUnload?.()
      event.preventDefault()
      event.returnValue = message
      return message
    }
    return ''
  }
  onMounted(() => {
    // 添加 beforeunload 事件监听器
    window.addEventListener('beforeunload', handleUnload)
  })

  onUnmounted(() => {
    // 移除 beforeunload 事件监听器
    window.removeEventListener('beforeunload', handleUnload)
  })
}
